<template>
  <div id="utils-diagnostics">
    <div class="form-wrap mb20">
      <os-entry :item="data.fields[0]">
        <input type="text" class="input-none bottom-line" style="margin-right: 10px;" v-model="enterHost">
        <el-select v-model="selected.host" class="select-middle" :popper-append-to-body="false">
          <el-option v-for="(item, idx) in select_host"
          :key="idx" :label="item.label" :value="item.label"></el-option>
        </el-select>
        <!-- <os-select v-model="selected.host" :options="select_host" :simple="true">
        </os-select> -->
      </os-entry>
      <os-select :wholeField="true" :item="data.fields[1]" v-model="selected.net_tool" :options="select_checktype">

      </os-select>
      <os-select :wholeField="true" :item="data.fields[2]" v-model="selected.protocol_type" :options="select_protocol">

      </os-select>
      <div class="value alone-right">
        <div class="btn btn-blue" @click="handle_submit">{{$t('btn.submit')}}</div>
      </div>
    </div>
    <div class="log-wrap mb20">
      <div class="log-title">{{data.log}}：</div>
      <div class="log-content">
        <p v-for="(item, idx) in log_info" :key="idx"
        class='log-line'>{{item}}</p>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        select_host: [
          { label: 'www.baidu.com', value: ''},
          { label: 'www.163.com', value: ''},
          { label: 'www.qq.com', value: ''},
          { label: 'www.sina.com', value: ''},
          { label: 'www.1688.com', value: ''},
        ],
        select_checktype: [
          { label: 'PING', value: 'ping'},
          { label: 'TRACEROUTE', value: 'traceroute'},
          { label: 'NSLOOKUP', value: 'nslookup'},
          { label: 'WGET', value: 'wget'},
        ],
        select_protocol: [
          { label: 'IPV4', value: '4'},
          // { label: 'IPV6', value: '6'},
        ],
        selected: {
          host: 'www.baidu.com',
          net_tool: 'ping',
          protocol_type: '4',
        },
        enterHost: "",
        log_info: '',
      }
    },
    computed:{
      data(){
        return this.$t('utils.diagnostics')
      }
    },
    methods: {
      handle_submit(){
        const loading = this.createLoading()
        this.$req.get('/webapi?op=test_'+this.selected.net_tool, {
          params: {
            host: this.enterHost || this.selected.host,
            ipversion: this.selected.protocol_type,
          }
        }).then(res=> {
          console.log(res, res.data.split('\n'));
          this.log_info = res.data.split('\n');
        }).finally(()=> {
          loading.close()
        })
        // switch(this.selected.net_tool){
        //   case 'ping' :
        //   this.$req.get('/webapi?op=test_ping', {
        //     params: {
        //       host: this.selected.host,
        //       ipversion: this.selected.protocol_type,
        //     }
        //   }).then(res=> {
        //     console.log(res.data.split('\n'));
        //     this.log_info = res.data.split('\n')
        //   })
        //   break
        //   case 'nslookup' :
        //   this.$req.get('/webapi?op=test_nslookup', {
        //     params: {
        //       host: this.selected.host,
        //       // ipversion: this.selected.protocol_type,
        //     }
        //   }).then(res=> {console.log(res)})
        //   break
        //   case 'traceroute' :
        //   this.$req.get('/webapi?op=test_traceroute', {
        //     params: {
        //       host: this.selected.host,
        //       ipversion: this.selected.protocol_type,
        //     }
        //   }).then(res=> {
        //     console.log(res.data)
        //     this.log_info = res.data.split('\n')
        //   })
        //   break
        //   case 'wget' :
        //   this.$req.get('/webapi?op=test_wget', {
        //     params: {
        //       host: this.selected.host,
        //       // ipversion: this.selected.protocol_type,
        //     }
        //   }).then(res=> {console.log(res)})
        //   break
        // }
        // loading.close()
      }
    },
    created(){
      this.$bus.emit('changeTab', 0)
    },
    activated(){
      this.$bus.emit('changeTab', 0)
    },
  }
</script>

<style lang="scss" scoped>

</style>
